{% extends base %}

{% block head %}

<style type="text/css">
    .content {
        width: 90%;
        float: none;
    }

    label {
        float: left;
        width: 100px;
    }

    h1, h2, h3 {
        margin: 5px 0px;
        padding: 5px;
        display: block;
        float: left;
        width: 100%;
        font-size: 14px;
        background: #eee;
        border-left: 5px solid #039BE5;
    }

</style>
{% end %}

{% block body %}

{% init url = "" %}
{% init error = "" %}
{% init address = "" %}
{% init images = [] %}
{% init scripts = [] %}
{% init texts = [] %}

<div class="col-md-12 card">
    {% set title = "网页资源采集器" %}
    {% include common/base_title.html %}
    <form method="POST" enctype="multipart/form-data">
        <p><label>上传文件</label><input type="file" name="file" /></p>
        <p><label>网址</label><input type="text" name="url" style="width: 50em;" value="{{url}}" /></p>
        <div>
            <input type="submit" value="抓取网页"/>
            <input type="button" id="saveToDbBtn" class="btn" value="保存到资料库">
        </div>
    </form>
</div>

<div style="color:red;">{{error}}</div>

<div class="card">
    <h2>Markdown 文本</h2>
    <textarea rows="30" class="content" id="content">
    {% for text in texts%}{{text}}
    {% end %}
    </textarea>
</div>

<h2>纯文本</h2>
<div><button id="readText">阅读</button></div>
<textarea rows="30" class="content" id="plainText">{{?plain_text}}</textarea>

<h2>Images</h2>
<textarea rows={{len(images)+2}} class="content">
{% for image in images %}{{image}}
{% end %}
</textarea>

<!-- {% for image in images %}
<img src="{{image}}"/>
{% end %} -->

<h2>Scripts</h2>
<textarea rows="{{len(scripts)+2}}" class="content">
{% for script in scripts%}{{script}}
{% end %}
</textarea>

<script type="text/javascript">
$("#saveToDbBtn").on("click", function () {
    layer.prompt({title: '输入资料名称'}, function(pass, index){
        layer.close(index);
        // 保存文档
        // var name = $("#savedName").val();
        var name = pass;
        var content = $("#content").val();
        $.post("/note/add", 
            {"_format": "json", "name": name, "content": content, "type": "md"}, 
            function (responseText) {
                console.log(responseText);
                var data = responseText;
                if (data.code == "success") {
                    location.href = "/note/view?id=" + data.id;
                } else {
                    layer.alert(data.message);
                }
        })
    });
});

$("#readText").click(function () {
    $.post("/api/tts", {content: $("#plainText").text()}, function (resp) {

    });
})
</script>

{% end %}